<script lang="ts" setup>
import { useVModel } from '@vueuse/core'
import { computed, inject, reactive, ref } from 'vue'
import { UploadImage } from '@/components/basic/Upload'
import to from '@/utils/awaitTo'
import { Api } from '@/api'
import { message } from 'ant-design-vue'

// 引用声明
const props = defineProps({
  open: {
    type: Boolean,
    default: false
  }
})

// 引用事件
const emit = defineEmits(['update:open'])

// 引用数据
const openModel = useVModel(props, 'open', emit)

const queryParams = inject('queryParams')

// 响应式数据
const formRef = ref()
const form = reactive({
  topicTitle: '',
  insertDataSource: '',
  sourceImageUrl: '',
  topicHyperlink: '',
  topicContentDataSource: '0',
  topicContent: '',
  firstClassificationId: queryParams.firstClassificationId,
  firstClassificationName: queryParams.firstClassificationName,
  secondClassificationId: queryParams.secondClassificationId,
  secondClassificationName: queryParams.secondClassificationName,
  thirdClassificationId: queryParams.thirdClassificationId,
  thirdClassificationName: queryParams.thirdClassificationName
})


// 提交事件
const handleSubmitOk = (formEl) => {
  if (!formEl) return
  formEl.validate().then(async () => {
    form.firstClassificationId = queryParams.firstClassificationIds.toString();
    form.firstClassificationName = queryParams.firstClassificationName;
    form.secondClassificationId = queryParams.secondClassificationIds.toString();
    form.secondClassificationName = queryParams.secondClassificationName;
    form.thirdClassificationId = queryParams.thirdClassificationIds.toString();
    form.thirdClassificationName = queryParams.thirdClassificationName;
    console.log(form)
    const [error] = await to(Api.tpbase.topicInsert(form))
    if (!error) {
      openModel.value = false;
      message.success('新增成功,等待审核过审')
    }
  })
}


//内容来源不同选择不同的字体
const contentTips = computed(() => {
  switch (form.topicContentDataSource) {
    case '0':
      return `chatGpt自动生成改内容不必填写`
    case '1':
      return `请输入文字内容`
    case '2':
      return `复制粘贴到该内容里`
    case '3':
      return `输入适量的内容，会结合chatgpt智能合并`
    default:
      return `what?...`
  }
})


// 规则
const rules = {
  topicTitle: [ //话题
    {
      required: true,
      message: `话题内容不能为空`,
      trigger: ['blur', 'change']
    }
  ],

  insertDataSource: [ //话题来源
    {
      required: true,
      message: `话题来源不能空`,
      trigger: ['blur', 'change']
    }
  ]

  // sourceImageUrl: [
  //     {
  //         required: true,
  //         message: "话题来源图片不能为空",
  //         trigger: ['blur', 'change']
  //     }
  // ],

  // topicHyperlink: [ //话题超链接
  //     {
  //         required: true,
  //         // message: `超链接不能为空`,
  //         trigger: ['blur', 'change'],
  //         validator: (_rule: string, value: string) => {
  //             // 如果已经有一个计时器在运行，清除它
  //             if (timeoutId) {
  //                 clearTimeout(timeoutId);
  //             }
  //             // 返回一个新的 Promise
  //             return new Promise<void>((resolve, reject) => {
  //                 // 设置一个新的计时器
  //                 timeoutId = setTimeout(() => {
  //                     if (!value) {
  //                         reject(`超链接不能为空`);
  //                     } else if (!isUrlReg.test(value)) {
  //                         reject(`超链接格式不正确`);
  //                     } else {
  //                         resolve();
  //                     }
  //                 }, 500); // 500ms 的节流时间
  //             });
  //         },
  //         whitespace: true,
  //     }
  // ],

  // topicContentDataSource: [ //内容来源
  //     {
  //         required: true,
  //         message: "内容来源不能为空",
  //         trigger: ['blur', 'change']
  //     }
  // ],

  // topicContent: [
  //     {
  //         required: true,
  //         message: `内容不能为空`,
  //         trigger: ['blur', 'change']
  //     }
  // ]
}

// 字典1
const TopicSourceListDist = [
  {
    label: '抖音',
    value: '抖音'
  },
  {
    label: '百度贴吧',
    value: '百度贴吧'
  },
  {
    label: '好大夫',
    value: '好大夫'
  },
  {
    label: '丁香医生',
    value: '丁香医生'
  },
  {
    label: '有来医生',
    value: '有来医生'
  },
  {
    label: '知乎',
    value: '知乎'
  },
  {
    label: '医疗问诊平台',
    value: '医疗问诊平台'
  },
  {
    label: '病友交流网',
    value: '病友交流网'
  },
  {
    label: '巢内网',
    value: '巢内网'
  },
  {
    label: '百度健康',
    value: '百度健康'
  },
  {
    label: '39健康网',
    value: '39健康网'
  },
  {
    label: 'INC神外科普',
    value: 'INC神外科普'
  },
  {
    label: '搜狐',
    value: '搜狐'
  },
  {
    label: '百度-各院主任回答',
    value: '百度-各院主任回答'
  },
  {
    label: '百度学术',
    value: '百度学术'
  },
  {
    label: '宝宝知道',
    value: '宝宝知道'
  },
  {
    label: '用户自创',
    value: '用户自创'
  },
  {
    label: '论坛',
    value: '论坛'
  },
  {
    label: '胶质瘤论坛',
    value: '胶质瘤论坛'
  },
  {
    label: '专科医生推荐',
    value: '专科医生推荐'
  }
]

// 字典2
const ContentSourceListDist = [
  {
    label: 'AI',
    value: '0'
  },
  {
    label: '用户自创',
    value: '1'
  },
  {
    label: '全网医学科普节选',
    value: '2'
  },
  {
    label: 'chatGpt智能聚合',
    value: '3'
  }
]

</script>

<template>
  <a-modal v-model:open="openModel" title="新增话题" @ok="handleSubmitOk(formRef)">
    <div class="mb-3">
      <a-space v-if="queryParams.firstClassificationName" class="flex">
        <div class="text-sm font-sans font-normal">一级分类</div>
        <div class="text-xs font-normal">{{ queryParams.firstClassificationName }}</div>
      </a-space>
      <a-space v-if="queryParams.secondClassificationName" class="flex">
        <div class="text-sm font-sans font-normal">二级分类</div>
        <div class="text-xs font-normal">{{ queryParams.secondClassificationName }}</div>
      </a-space>
      <a-space v-if="queryParams.thirdClassificationName" class="flex">
        <div class="text-sm font-sans font-normal">三级分类</div>
        <div class="text-xs font-normal">{{ queryParams.thirdClassificationName }}</div>
      </a-space>
    </div>
    <a-form
      ref="formRef"
      :model="form"
      :rules="rules"
      layout="vertical"
      name="AddTopicModal"
    >
      <!-- 话题标题  -->
      <a-form-item :validateFirst="false" label="话题" name="topicTitle">
        <a-textarea
          v-model:value="form.topicTitle"
          show-count
        />
      </a-form-item>

      <!-- 话题来源 -->
      <a-form-item
        :validateFirst="true"
        label="话题来源"
        name="insertDataSource"
      >
        <a-select
          v-model:value="form.insertDataSource"
          placeholder="请选择内容来源"
        >
          <a-select-option
            v-for="item in TopicSourceListDist"
            :key="item.value"
            :value="item.value"
          >{{ item.label }}
          </a-select-option>
        </a-select>
      </a-form-item>

      <a-form-item
        v-if="form.insertDataSource !== '用户自创'"
        :validateFirst="true"
        extra="图片"
        label="话题来源图片"
        name="sourceImageUrl"
      >
        <UploadImage v-model="form.sourceImageUrl" />
      </a-form-item>

      <a-form-item
        v-if="form.insertDataSource !== '用户自创'"
        extra="例如:https://baike.baidu.com/item/%e6%9d%8e%e7%99%bd/1043"
        has-feedback
        label="话题超链接"
        name="topicHyperlink"
      >
        <a-textarea
          v-model:value="form.topicHyperlink"
          :rows="1"
        />
      </a-form-item>

      <a-form-item
        :validateFirst="true"
        extra="内容来源选择’AI‘ chatgpt自动生成 "
        has-feedback
        label="内容来源"
        name="topicContentDataSource"
      >
        <a-select
          v-model:value="form.topicContentDataSource"
          placeholder="请选择内容来源"
        >
          <a-select-option
            v-for="item in ContentSourceListDist"
            :key="item.value"
            :value="item.value"
          >{{ item.label }}
          </a-select-option
          >
        </a-select>
      </a-form-item>

      <a-form-item
        v-if="Number(form.topicContentDataSource) !== 0"
        :extra="contentTips"
        label="内容"
        name="topicContent"
      >
        <a-textarea
          v-model:value="form.topicContent"
          :rows="4"
          placeholder="请输入内容"
          show-count
        />
      </a-form-item>
    </a-form>
  </a-modal>
</template>

<style lang="less" scoped>

</style>
